<template>
  <a-modal
    :width="1060"
    :visible="visible"
    :confirm-loading="loading"
    :title="isUpdate ? '查看视频信息' : '查看视频信息'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    >
      <template #footer>
          <a-button style="margin-right: 8px" @click="updateVisible(false)">关闭</a-button>
      </template>
      <div class="ele-body">
        <!-- 播放器 -->
        <ele-xg-player :config="config" @player="onPlayer" />
      </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, reactive,watch } from 'vue';
  import type Player from 'xgplayer';
  import type { Video } from '@/api/neirong/video/model';
  
  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();
  
  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 修改回显的数据
    data?: Video;
  }>();
  
  // 是否是修改
  const isUpdate = ref(false);
  
  // 提交状态
  const loading = ref(false);

  // 视频播放器配置
  const config = reactive({
    id: 'demoPlayer1',
    lang: 'zh-cn',
    fluid: true,
    // 视频地址
    url: 'https://s1.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
    // 封面
    poster:
      'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png',
    // 开启倍速播放
    playbackRate: [0.5, 1, 1.5, 2],
    // 开启画中画
    pip: false
  });

  // 视频播放器是否实例化完成
  const ready = ref(false);

  // 视频播放器实例
  let player: Player;

  /* 播放器渲染完成 */
  const onPlayer = (e: Player) => {
    player = e;
    player.on('play', () => {
      ready.value = true;
    });
  };
  
  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  	if (player) {
  	  player.pause();
  	}
  };

  
  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        if (props.data) {
          isUpdate.value = true;
		  config.url = props.data.video;
		  config.poster = props.data.image;
        } else {
          isUpdate.value = false;
        }
      }
    }
  );
</script>

<script lang="ts">
  export default {
    name: 'ExtensionPlayer'
  };
</script>
